<script setup>
import { useRoute } from 'vue-router';
import { useCartStore } from '@/stores/cart';
import { useInfoStore } from '@/stores/info';
import PayLeftVip from '@/pages/payPages/payLeftVip.vue';
import PayLeftCart from '@/pages/payPages/payLeftCart.vue';
import PayRight from '@/pages/payPages/payRight.vue';
const route = useRoute();
const cartStore = useCartStore();
const infoStore = useInfoStore();
const userName = infoStore.userInfo.nickname;
let payInfo = {};
if(route.query.type === 'vip'){
  payInfo = {
    type: 'vip',
    items: route.query.level,
    total: parseFloat(route.query.price)
  };
}else if(route.query.type === 'cart'){
  payInfo = {
    type: 'cart',
    items: cartStore.cartItems,
    total: cartStore.cartTotal()
  };
}
</script>

<template>
  <div class="left-container">
    <pay-left-vip 
      v-if="payInfo.type === 'vip'" 
      :userName="userName"
      :payInfo="payInfo">
    </pay-left-vip>
    <pay-left-cart 
      v-else-if="payInfo.type === 'cart'" 
      :userName="userName"
      :payInfo="payInfo">
    </pay-left-cart>
    <div v-else>无效的商品信息</div>
  </div>
  <div class="right-container">
    <pay-right :type="payInfo.type" :items="payInfo.items" :total="payInfo.total"></pay-right>
  </div>
</template>

<style scoped>
.left-container, .right-container {
  background-color: var(--wrap-bg);
  padding: 40px 32px;
}

.left-container {
  width: 55%;
  height: 100vh;
  float: left;
  box-sizing: border-box;
}

.right-container {
  width: 45%;
  height: 100vh;
  float: left;
  box-sizing: border-box;
  background-color: var(--wrap-bg);
}

@media (max-width: 1200px) {
  .left-container, .right-container {
    width: 100%;
    float: none;
    margin: 20px auto;
    max-width: 98vw;
  }
}
</style>